<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多组件的使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <school></school>
</div>

<script>

    // 非单文件组件的定义   局部组件
    //定义学生组件
    const student = {
        template: `
                <div>
                    <div  v-for="student  in  students" style="border: 1px solid red;width: 300px;height: 200px; text-align: center;margin-top: 10px">
                        <h3>学生信息展示</h3>
                        <p>学生姓名:{{student.name}}</p>
                        <p>学生年龄:{{student.age}}</p>
                        <p>学生专业:{{student.major}}</p>
                    </div>
                </div>
        `,
        data(){
            return{
                students:[
                    {
                        name:'tom',
                        age:20,
                        major:'Java'
                    },
                    {
                        name:'jack',
                        age:30,
                        major:'Web'
                    }
                ]
            }
        }
    }

    //定义学校组件
    const  school = {
        template: `
                <div>
                    <div style="width: 300px;height: 150px;border: 1px solid blue">
                        <p>学校名称:{{name}}</p>
                        <p>学校地址:{{address}}</p>
                    </div>
                    <student></student>
                </div>
        `,
        data() {
            return {
                name:'合肥一元教育',
                address:'合肥市庐阳区北城大道工投创智天地'
            };
        },
        components: {
            student
        }
    }

    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            school
        }
    })
</script>
</body>
</html>
